<template>
  <div class="panel-top-nav">
    <div class="panel-name">
      <p class="text">Data Visualization</p>
    </div>
    <div class="status-bar">
      <ul class="status-list">
        <li class="status-item">
          <span class="status-item-text">ID</span>
          <span class="status-value">{{projectId}}</span>
        </li>
        <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{ $t('project.name') }}</span>
          <span class="status-value">{{platformName}}</span>
        </li>
        <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{ $t('cmlpanel.version') }}</span>
          <span class="status-value">{{platformVersion}}</span>
        </li>
        <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{ $t('project.describe') }}</span>
          <span class="status-value">{{description}}</span>
        </li>
        <!-- <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{ $t('cmlpanel.resolution') }}</span>
          <span class="status-value">{{ screen.width }}*{{ screen.height }}</span>
        </li>
        <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{$t('cmlpanel.designSize')}}</span>
          <span class="status-value">{{designSize.w}}*{{designSize.h}}</span>
        </li>
        <li class="separator">/</li>
        <li class="status-item">
          <span class="status-item-text">{{ $t('cmlpanel.browser') }}</span>
          <span class="status-value">「{{ browser.browser }} {{ $t('cmlpanel.version') }}
            {{ browser.version }}」</span>
        </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
import { envServer as env } from 'anov-core'


export default {
  name: 'PanelTopNav',
  components: {},
  model: {},
  props: {},
  data() {
    return {
      screen: {
        width: 0,
        height: 0
      },
      browser: {}
    }
  },
  computed: {
    projectId() {
      return this.$cmlG.projectId
    },
    platformName() {
      return this.$cmlG.platformName
    },
    description() {
      return this.$cmlG.description
    },
    platformVersion() {
      return this.$cmlG.platformVersion
    }
  },
  watch: {
    
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
@import '../style/panel-var.scss';
@import '../style/panel-mixin.scss';
.panel-top-nav {
  width: 100%;
  height: 70px;

  color: #729693;
  background: $bg-color;
  /* background-image: linear-gradient(#091d2e 1px, transparent 0),
    linear-gradient(90deg, #091d2e 1px, transparent 0);
  background-size: 24px 24px; */

  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  .panel-name {
    height: 30px;
    padding-top: 12px;

    color: $line-color;

    font-size: 12px;
    text-transform: uppercase;

    @include flex(row, flex-end);
  }
  .status-bar {
    position: relative;

    box-sizing: border-box;
    border: 1px solid #293135;
    border-bottom: none;
    font-size: 12px;
    /* &:after, &:before {
      display: block;

      position: absolute;
      top: -2px;

      width: 3px;
      height: 3px;

      background-color: $text-color;

      opacity: .5;

      content: '';
    }
    &:after {
      right: 0;
    } */
    .status-list {
      height: 39px;
      padding-left: 40px;
      background-color: #111215;
      @include flex(row, flex-start);
      .status-item {
        position: relative;

        .status-item-text {
          padding-right: 4px;

          font-weight: normal;
        }
      }
      .separator {
        padding: 0 50px;

        opacity: .5;
      }
    }
  }
}
</style>
